<template>
	<view class="page">
		<image :src="'/static/my/share.png'" mode=""></image>
		<u-sticky bgColor="#bce3d7">
			<view :style="{ padding: '0 20rpx', margin: '20rpx 0' }">
				<u-input v-model="search" placeholder="输入搜索内容" suffix-icon="search" clearable
					suffix-icon-style="color: #909399" shape="circle" border="none" font-size="13px"
					@confirm="handleSearch" :custom-style="{
		      background: '#fff',
		      padding: '6px 12px',
		      boxShadow: '0 0 20rpx rgba(186, 186, 186, 0.1)',
		    }" />
			</view>
			<view class="tabBox" v-if="isShow">
				<u-scroll-list style="width: 100% !important;" :indicator="false">
					<view class="" style="display: flex;">
						<view class="navItem" v-for="(i,index) in typeList" :key="index"
							:style="{color:(tabCurrent == i.id?'#313131':'#979797')}" @tap.stop="tabChange(i.id)">
							<view class="">
								{{i.name}}
							</view>
						</view>
					</view>
				</u-scroll-list>
			</view>

		</u-sticky>
		<view class="body">
			<view class="line"></view>
			<contentsInfo :list="dataList" :isAddress="true" :url="'/pages/home/festivalDetail'" metType="1"/>
			<!-- <consultBody :list="dataList" :metType='0' :url="'/pages/home/festivalDetail'" type="1" /> -->
			<u-loadmore :status="status" />
		</view>
	</view>
</template>
<script>
	// import consultBody from '@/pages/index/consultBody.vue';
	import contentsInfo from '@/pages/index/cpns/contentsInfo.vue';
	import {
		knowList,
		knowCategory
	} from "@/request/homeApi.js";

	export default {
		components: {
			contentsInfo
		},
		data() {
			return {
				page: 1,
				news_category_id: 1,
				last_page: 1,
				search: '',
				isShow: true,
				typeList: [],
				tabCurrent: '',
				dataList: [],
				status: "nomore", // 加载状态
			};
		},
		onReachBottom() {
			let that = this
			if (that.page < that.last_page) {
				that.page = that.page + 1
				that.getList()
			}
		},
		onLoad(e) {
			this.getTypeList();
		},
		watch: {
			search(val) {
				if (!val) {
					this.page = 1;
					this.tabCurrent = ''
					this.dataList = []
					this.getList();
					this.isShow = true
				}
			}
		},
		methods: {
			// tab 切换
			tabChange(e) {
				this.tabCurrent = e
				this.dataList = []
				this.page = 1
				this.getList()
			},

			// 获取资讯类型
			getTypeList() {
				let that = this
				knowCategory().then(res => {
					if (res.code == 200) {
						res.data.unshift({
							id: '',
							name: "全部"
						})
						that.typeList = res.data
						that.tabCurrent = res.data.length > 0 ? res.data[0].id : ''
						this.getList();
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
					}
				})
			},
			// 获取资讯列表
			getList() {
				this.status = "loading";
				let that = this
				knowList({
					category_id: that.tabCurrent,
					page: that.page,
					limit: 10,
					title: that.search,
					is_top: ''
				}).then(res => {
					if (res.code == 200) {
						that.dataList = that.dataList.concat(res.data.list)
						console.log(that.dataList, 'that.dataList')
						that.last_page = Math.ceil(res.data.count / res.data.list.length)
						res.data.count == 0 ? that.status = 'nomore' : that.status = ''
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
					}

				})
			},

			handleSearch(e) {
				this.search = e ? e : ''
				this.isShow = false
				this.page = 1;
				this.tabCurrent = ''
				this.dataList = []
				this.getList();
			},

			// 查看详情
			handleDetail(val) {
				uni.navigateTo({
					url: `/pages/home/festivalDetail?id=${val.id}&title=${tab.name}详情`,
				});
			},
		},
	};
</script>
<style lang="scss" scoped>
	.page {
		width: 100vw;
		height: 100vh;

		image {
			width: 100%;
			height: 100vh;
			position: fixed;
			top: 0;
		}

		.u-sticky {
			background-color: #bce3d7;
		}

		.u-input {
			background-color: #bce3d7;
		}

		.body {
			padding: 0rpx 20rpx;

			.f-bottom {
				font-weight: 600;
				font-size: 28rpx;
				color: $active-color;
				margin-left: 20rpx;

				text:nth-child(2) {
					font-size: 24rpx;
				}

				text:last-child {
					font-size: 40rpx;
				}
			}
		}

		.line {
			width: 94%;
			height: 2rpx;
			margin: 10rpx auto;
			background-color: #DADADA;
		}

		.tabBox {
			display: flex;
			justify-content: space-between;
			background-color: #bce3d7;
			width: 100%;
			padding: 10rpx 20rpx 0;
			box-sizing: border-box;
			text-align: left;
			font-size: 30rpx;
			overflow-x: auto;

			/deep/.u-scroll-list {
				padding-bottom: 0 !important;
			}

			.leftIcon {
				width: 100%;
				padding: 0 26rpx;
				box-sizing: border-box;
				height: 3rpx;
				margin: 14rpx auto;
			}

			.navItem {
				padding: 0 26rpx;
				text-align: center !important;
			}
		}
	}
</style>